<template>
  <div>
    <div class="login">
      <form class="login-form">
        <h1>注册</h1>
        <input type="text" placeholder="账号" v-model="user.useracc" />
        <input type="password" placeholder="密码" v-model="user.userpwd" />
        <input type="text" placeholder="用户名" v-model="user.username" />
        <img :src="code" @click="getcode" alt="点击更换验证码" />
        <el-input v-model="checkCode" placeholder="请输入验证码"></el-input>
        <button type="button" @click="Reg">注册</button>
        <router-link to="/">已有账号，去登陆</router-link>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: "",
      result: "",
      checkCode: "",
      user: {
        useracc: "",
        userpwd: "",
        sex: "男",
        username: "",
      },
    };
  },
  methods: {
    Reg() {
      if (this.checkCode == "") {
        this.$message.error("验证码不能为空~");
        return;
      }
      if (this.checkCode !== this.result) {
        this.$message.error("验证码错误~");
        this.getcode();
        return;
      }
      if (
        this.user.useracc == "" ||
        this.user.userpwd == "" ||
        this.user.username == ""
      ) {
        this.$message.error("必填项不能为空~");
        return;
      }
      this.$axios
        .get("/api/user-service/user/userReg", { params: this.user })
        .then((resp) => {
          this.$message.success(resp.data.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getcode() {
      this.$axios
        .get("/api/user-service/user/createCode", {
          params: { d: new Date() * 1 },
        })
        .then((resp) => {
          this.code = resp.data.data.img;
          this.result = resp.data.data.key;
        });
    },
  },
  created() {
    this.getcode();
  },
};
</script>

<style>
.body {
  background-color: #f3f3f3;
  text-align: center;
  font-family: sans-serif;
}
.login-form {
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 20px;
  width: 400px;
  margin: 100px auto;
}
.login-form h1 {
  margin-top: 0;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
.login-form input[type="text"],
.login-form input[type="password"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.login-form button {
  background-color: #4caf50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}
.login-form button:hover {
  opacity: 0.8;
}
</style>